<template>
  <div>
    <van-nav-bar title="修改用户资料" left-arrow @click-left="$router.go(-1)" />
    <van-cell class="avatar" is-link title="头像">
      <van-image width="40" height="40" :src="icon" />
    </van-cell>
    <van-cell
      is-link
      title="昵称"
      @click="popup('编辑昵称', 'username')"
      :value="username"
    />
    <van-cell
      is-link
      title="手机号"
      @click="popup('编辑手机号', 'mobile')"
      :value="mobile"
    />
    <van-cell
      is-link
      title="性别"
      @click=";(dateShow = true), (clickType = 'sex')"
      :value="sex ? '女' : '男'"
    />
    <van-cell
      is-link
      title="出生年月"
      @click=";(dateShow = true), (clickType = 'datatime')"
    />
    <van-cell
      is-link
      title="家庭住址"
      @click="popup('编辑家庭住址', 'address')"
      :value="address"
    />
    <van-cell
      is-link
      title="个信留言"
      @click="popup('编辑个性签名', 'notes')"
      right-text="按钮"
      :value="notes"
    />

    <!-- 信息修改栏、 -->
    <van-action-sheet class="pop" v-model="show">
      <van-nav-bar
        :title="poptitle"
        left-text="取消"
        right-text="完成"
        @click-left="onClickLeft"
        @click-right="fined"
        class="content"
      />
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        :maxlength="maxlength"
        placeholder="请输入留言"
        show-word-limit
      />
    </van-action-sheet>
    <!-- 日期选择 -->
    <van-action-sheet v-model="dateShow">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        @confirm="fined"
        @cancel="dateShow = false"
        v-show="clickType === 'datatime'"
      />
      <van-picker
        show-toolbar
        title="性别"
        :columns="columns"
        v-show="clickType === 'sex'"
        @confirm="fined"
        @cancel="dateShow = false"
      />
    </van-action-sheet>
    <!-- 性别选择 -->
  </div>
</template>
<script>
import { userAPI, updateAPI } from '@/api/login'
import { Toast } from 'vant'
export default {
  data () {
    return {
      // 性别列
      columns: [
        // 第一列
        {
          values: ['男', '女'],
          defaultIndex: 1
        }
      ],
      icon: '',
      // 用户id
      id: 1,
      // 昵称
      username: '无敌',
      // 手机号
      mobile: '1111111111',
      // 性别
      sex: 1,
      // 个性留言
      notes: '',
      // 家庭住址
      address: '',
      // 出生年月
      birthoday: '',
      show: false,

      // 弹出层标题
      poptitle: '',
      // 更新输入框值
      message: '',
      dateShow: false,
      currentDate: new Date(),
      // 点击事件类型
      clickType: '',
      // 输入框最大宽度
      maxlength: 20
    }
  },
  methods: {
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
      Toast(item.name)
    },
    // 关闭当前弹出页
    onClickLeft () {
      this.show = false
    },
    async UserInfo () {
      const token = 'Bearer ' + localStorage.getItem('ydd-mobile')
      const { data: res } = await userAPI(token)
      const Info = res.data.userInfo
      this.icon = 'http://124.223.14.236:8060/' + Info.icon
      this.username = Info.username
      this.mobile = Info.mobile
      this.sex = Info.sex
      this.id = Info.id
      this.notes = Info.notes
      this.address = Info.address
      console.log(Info)
    },
    // 获取弹出层类型：昵称-手机号-性别-出生年月
    popup (title, type) {
      this.poptitle = title
      this.show = true
      this.type = type
      // 点击信息判断
      if (type === 'username') this.message = this.username
      if (type === 'mobile') this.message = this.mobile
      if (type === 'address') this.message = this.address
      if (type === 'notes') this.message = this.notes
    },
    // 弹出层完成按钮
    async fined (val) {
      console.log(val)
      // 判断类型
      const data = {}
      data[this.type] = this.message
      data.id = this.id
      const { data: res } = await updateAPI(data)
      console.log(res)
      // 关闭弹出层
      this.show = false
      this.dateShow = false
      // 刷新页面数据
      this.UserInfo()
    }
  },

  created () {
    this.UserInfo()
  }
}
</script>
<style scoped lang="less">
// 头像信息
.avatar {
  .van-cell__title {
    line-height: 40px;
  }
  .van-cell__right-icon {
    line-height: 40px;
  }
  ::v-deep .van-image__img {
    border-radius: 50%;
  }
}

.content {
  padding: 16px 16px 16px;
  // height: 100vh;
  box-sizing: border-box;
}
// 设置弹出框大小
.van-popup {
  max-height: 100%;
  border-radius: 0;
}
.pop {
  height: 500px;
}
</style>
